<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">
    <title>WebMidi.js Quick Start</title>

    <script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script>

    <script type="module">

      // Enable WebMidi.js and trigger the onEnabled() function when ready.
      WebMidi
        .enable()
        .then(onEnabled)
        .catch(err => alert(err));

      function onEnabled() {

        if (WebMidi.inputs.length < 1) {
          document.body.innerHTML+= "No device detected.";
        } else {
          WebMidi.inputs.forEach((device, index) => {
            document.body.innerHTML+= `${index}: ${device.name} <br>`;
          });
        }

        const mySynth = WebMidi.inputs[0];
        // const mySynth = WebMidi.getInputByName("TYPE NAME HERE!")

        mySynth.channels[1].addListener("noteon", e => {
          document.body.innerHTML+= `${e.note.name} <br>`;
        });

      }

    </script>

  </head>

  <body>
    <h1>WebMidi.js Quick Start</h1>
  </body>

</html>
